<template>
    姓名： {{ name }} <br />
    Age: {{ age }} <br />
    <button @click="changeName">更改姓名</button> &nbsp; &nbsp;
    <button @click="changeAge">更改Age</button>&nbsp; &nbsp;
</template>

<script lang="ts" setup name="UseWatchEffect">
import { ref, watchEffect } from 'vue'
let name = ref('xiao')
let age = ref(12)

function changeName() {
    name.value += "~";
}
function changeAge() {
    age.value += 1;
}

//watchEffect 会监视该Vue中的所有变更
const stopWatch = watchEffect(() => {
    console.log("name变更了", name.value)
    if (age.value > 25) {
        console.log("Age变更了,大于25就不监视了", age.value)
        stopWatch();
    }

})

</script>

<style scoped>
/* 添加scoped表示只在该vue中使用 */
</style>